import React, { Component } from 'react'
import { connect } from 'react-redux'

const TodoList = (props) => {
  // 优化 解构赋值
  const { myValue, handleChange } = props
  return (
    <div>
      <div>
        <input value={myValue} onChange={handleChange} />
        <button>提交</button>
      </div>
      <ul>
        <li>hhhhh</li>
      </ul>
    </div>
  )
}

// class TodoList extends Component {

//   render() {
//     // 优化 解构赋值
//     const { myValue, handleChange } = this.props
//     return (
//       <div>
//         <div>
//           <input value={myValue} onChange={handleChange} />
//           <button>提交</button>
//         </div>
//         <ul>
//           <li>hhhhh</li>
//         </ul>
//       </div>
//     )
//   }
//   // handleChange(e) {
//   //   console.log(e.target.value)
//   // }
// }

// 连接的映射规则
const mapStateProps = (state) => {
  return {
    // state 是 store里面的数据
    myValue: state.inputValue
  }
}

// 修改数据的方法
const mapDispatchToProps = (dispatch) => {
  return {
    handleChange(e) {
      console.log(e.target.value)
      const action = {
        type: 'input_value_change',
        value: e.target.value
      }
      dispatch(action)
      // dispatch()
    }
  }
}

// export default TodoList
export default connect(mapStateProps, mapDispatchToProps)(TodoList)